import ImageWithError from "@page/common/comps/ImageWithError";
import ProtocolTag from "@page/common/comps/ProtocolTag";
import Popover from "@ui/RJMart/popover";
// import icon_promise from "../../../../imgs/icon_promise.png";
import urlHook from "@page/common/utils/urlHook";
import "@root/pages/ruijing/cart/cart.css";
import "@root/pages/ruijing/search/searchproduct.css";
import "@root/pages/ruijing/detail/detail.css";
import DangeTag from "@page/common/comps/DangeTag";
import Uts from "@module/Uts";
import Filter from "@module/Filter";

export default class GoodsLists extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        };
    }

    componentDidMount() {

    }

    getCutstringLen(brandName,agencyName,protocol){
        let cutLen=0;

        if(agencyName){
            cutLen=6;
            if(protocol==1){
                cutLen=4;
            }
            let letterLen=this.getEnglishLetterLen(brandName);
            let addLen=Math.floor(letterLen/2);
            cutLen+=addLen;
        }else{
            if(protocol==1){
                cutLen=8;
            }else{
                cutLen=12;
            }
            let letterLen=this.getEnglishLetterLen(brandName);
            let addLen=Math.floor(letterLen/2);
            cutLen+=addLen;
        }
        return cutLen;
    }

    getEnglishLetterLen(brandName){
        if(brandName){
            if(/[a-z\(\)]/.test(brandName)){
                return brandName.match(/[a-z\(\)]/g).length;
            }
        }
        return 0;
    }

    render() {
        const { index, item ,countClick} = this.props;


        // "productCas":"",//CAS号
        //     "categoryId":106,//分类id
        //     "categoryName":"离心/过滤/浓缩类",//分类名称
        //     "brandId":1051,//品牌ID
        //     "brandName":"赛默飞(ThermoFisher)",//品牌名
        //     称
        // "supplierId":7,//供应商id
        //     "supplierName":"广东丹利科技有限公司",//供应
        //     商名称
        // "productSpecification":"个",//商品规格
        //     "normalPrice":85,//日常价格
        //     "activePrice":500,//活动价格


        const { selected } = this.state;
        const {
            id,
            photo,
            productName,
            productCode,
            productCas,
            normalPrice,
            brandName,
            supplierName,
            productSpecification,
            activePrice,
            newActiveProductFlag,
            supplierId,
            productId
        } = item||{};

        let _brandName=brandName;
        if(brandName){
            _brandName=brandName.replace(Uts.allTagEXP, "");
        }
        let agencyName="一级代理"
        let cutLen=this.getCutstringLen(_brandName,agencyName);

        return (
            <div className={"search-page-goods-lists-box"}>
                {index == 0 && <TabHeader />}
                <div
                    onClick={() => {
                        countClick(id);
                        window.open(`#detail?productId=${productId}&suppId=${supplierId}`);
                    }}
                    onMouseOver={() => {
                        this.setState({
                            selected: true
                        });
                    }}
                    onMouseOut={() => {
                        this.setState({
                            selected: false
                        });
                    }}
                    className={
                        selected
                            ? "search-page-lists-item-choosed"
                            : "search-page-lists-item"
                    }
                >
                    <div className={"search-page-lists-item-tab1 zen_w-p30"}>
                        <ImageWithError src={photo} />
                        <div className={"search-page-lists-item-pro zen_white"}>
                            <span
                                className="zen_3C3C3C zen_fs-16 zen_m-r-5 rj_el-2"
                                dangerouslySetInnerHTML={{
                                    __html: productName
                                }}
                            />
                        </div>
                    </div>
                    <div className={"search-page-lists-item-tab2 zen_w-p13"}>
                        <p
                            dangerouslySetInnerHTML={{
                                __html: productCode || "无"
                            }}
                            className={"search-page-lists-text-no zen_w-p90"}
                        />

                        <p
                            dangerouslySetInnerHTML={{
                                __html: productCas
                            }}
                            className={"search-page-lists-text-no1 zen_w-p90"}
                        />
                    </div>
                    <div className={"search-page-lists-item-tab3 zen_w-p20"}>
                        <div className="zen_l-h-20 zen_clf">
                            <p
                                dangerouslySetInnerHTML={{
                                    __html: brandName
                                }}
                                className={
                                    "search-page-lists-text-no zen_f-left zen_m-w-p80"
                                }
                            />
                        </div>
                        <p
                            onClick={e => {
                                e.stopPropagation();
                                window.open(`#supplierShop?suppId=${supplierId}`);
                            }}
                            dangerouslySetInnerHTML={{
                                __html:supplierName || "/"
                            }}
                            className={"search-page-lists-text-tab3 zen_w-p85"}
                        />
                    </div>

                    <div className={"search-page-lists-item-tab4 zen_w-p12"}>
                        <p className={"search-page-lists-text-guige"}>
                            {Filter.cutString(productSpecification, 12, 1)}
                        </p>
                    </div>
                    <div className={"search-page-lists-item-tab5 zen_w-p11"}>
                        <div
                            className="zen_clf"
                            style={{ display: "flex" }}
                        >
                            <div>
                                <p className="zen_F5222D  zen_fs-18 " style={{color:'rgba(150, 150, 150, 1)'}}>
                                    ¥{normalPrice&&normalPrice.toFixed(2)}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className={"search-page-lists-item-tab5 zen_w-p13 zen_flex"}>
                        <div
                            className="zen_clf"
                            style={{ display: "flex" }}
                        >
                            <div>
                                <p className="zen_F5222D zen_bold zen_fs-18">
                                    ¥{activePrice&&activePrice.toFixed(2)}
                                </p>
                            </div>
                        </div>
                        {
                            newActiveProductFlag?(
                                <div className={"detail-top-detail-tejia-band4"}>
                                    <p className={"detail-top-detail-tejia-band-p"}>
                                        最新优惠
                                    </p>
                                </div>
                            ):null
                        }

                    </div>
                </div>
            </div>
        );
    }



}

class AttrComp extends React.Component {
    render() {
        const { attrItems } = this.props;

        return (
            <div className={"search-page-lists-item-tab6"}>
                {attrItems &&
                    attrItems.map((item, index) => {
                        return (
                            <p
                                key={index}
                                dangerouslySetInnerHTML={{
                                    __html: item
                                }}
                                className={"search-page-lists-text-tab6-2"}
                            />
                        );
                    })}
            </div>
        );
    }
}


class TabHeader extends React.Component {
    render() {
        return (
            <div className={"table-header"}>
                <div className={"search-page-lists-tab1 zen_w-p30"}>
                    <p>名称</p>
                </div>
                <div className={"search-page-lists-tab2 zen_w-p13"}>
                    <p>货号/CAS号</p>
                </div>
                <div className={"search-page-lists-tab3 zen_w-p20"}>
                    <p>品牌/供应商</p>
                </div>
                {/*<div className={"search-page-lists-tab6 zen_w-p17"}>*/}
                {/*    <p>附加属性</p>*/}
                {/*</div>*/}
                <div className={"search-page-lists-tab4 zen_w-p12"}>
                    <p>规格</p>
                </div>
                <div className={"search-page-lists-tab5 zen_w-p11"}>
                    <p>日常价格</p>
                </div>
                <div className={"search-page-lists-tab5 zen_w-p13"}>
                    <p>活动价格</p>
                </div>
            </div>
        );
    }
}
